<template>
    <div>
      <el-form :inline="true" :model="suggests" class="user-search">
      <el-form-item>
        <el-input size="small" v-model="suggests.userId" placeholder="输入用户id" clearable></el-input>
      </el-form-item>
       <el-form-item>
        <el-input size="small" v-model="suggests.content" placeholder="输入用户投诉内容" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-select size="small" v-model="suggests.type" placeholder="请选择投诉类型" clearable>
          <el-option v-for="type in suggestType" :label="type.key" :value="type.value" :key="type.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上传文件" prop="excelFile">
            <el-upload
                class="upload-demo"
                ref="upload"
                :action="uploadUrl()"
                name="file"
                drag
                show-file-list
                :limit="1"
                :data="upData"
                :file-list="fileList"
                :on-error="uploadFalse"
                :on-success="uploadSuccess"
                :on-exceed="max"
                :auto-upload="false"
                :before-upload="beforeAvatarUpload">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

                <div slot="tip" class="el-upload__tip" style="color:red">上传文件只能是 jpg、png、txt 格式!</div>
            </el-upload>
        </el-form-item>
         <el-form-item>
            <el-button type="primary" @click="submitUpload(suggests)">导入</el-button>
            <el-button   @click="onCancel(suggests)">取消</el-button>
        </el-form-item>
    </el-form>


    </div>
</template>
<script>
export default {
  created() {

    this.getType()
  },
  data() {
    return {
        fileList: [],
        suggests: {
        userId: '',
        content:"",
        type: 0,
        fileName:'',
        },
        url:"http://localhost:1011/uploadFile",
        suggestType: [
        { key: '请选择投诉类型', value: 0 },
        ],

        rules: {
            coordinateType: [
                { required: true, message: '请选择文件中的坐标类型', trigger: 'change' }
            ],
        },

    }
  },
  computed: {
            // 这里定义上传文件时携带的参数，即表单数据
            upData: function() {
                return this.suggests
            }
        },
  methods:{
    max(){
      this.$message({
                  message: '只能上传一张图片',
                  type: 'error'
              });
    },
   //获取投诉类型
    getType(){
       this.$axios.post("http://localhost:1011/suggestion/findAllType").then(res=>{
         let data = res.data.data
         for(let i in data){
           this.suggestType.push({"key":data[i].typeName,"value":data[i].type})
         }
       }).catch()
    },
    //文件上传相关方法

//导入接口地址
      uploadUrl() {
          return 'http://localhost:1011/suggestion/add' //接口
      },
      //文件上传成功触发
      uploadSuccess(response, file, fileList) {
          console.log(response)
          if(response.code == 200){
              this.$message({
                  message: '导入成功',
                  type: 'success'
              });
          }else {
                this.$message({
                  message: '导入失败',
                  type: 'error'
              });
          }
      },
        //文件上传失败触发
      uploadFalse(response, file, fileList) {
            this.$message({
                  message: '文件上传失败！',
                  type: 'error'
              });
      },
      // 上传前对文件的大小和类型的判断
      beforeAvatarUpload(file) {
          this.suggests.fileName = file.name;
          const extension = file.name.split(".")[1] === "jpg";
          const extension2 = file.name.split(".")[1] === "png";
          const extension3 = file.name.split(".")[1] === "txt";
          if (!extension && !extension2 && !extension3) {
          this.$message({
                  message: '上传文件只能是 jpg、png、txt 格式!',
                  type: 'error'
              });
          }
          return extension || extension2 || extension3 ;
      },
      //表单提交
      submitUpload(form) {

                  this.$refs.upload.submit();
                 //this.$router.go(0)


          ;
      },
      //表单取消
      onCancel(form){
          this.$refs.form.resetFields();
      }


  }
}
</script>
